import React,{Component} from "react"
import {
    Card,
    Tooltip,
    Divider,
    Tabs,
    DatePicker,
    Table,
    Image
} from "antd"
import {
    InfoCircleOutlined,
    CaretUpOutlined,
    CaretDownOutlined,
    SmallDashOutlined
} from '@ant-design/icons';
import "./home.scss"
import format from "../../util/format"
import CountUp from "react-countup";//数字滚动
import * as echarts from 'echarts';

const { TabPane } = Tabs;
const { RangePicker } = DatePicker;

// 头部
class Header extends Component{
    constructor(){
        super();
        this.state={
            height_charts:0,
            widthSpeed:0,
        }
    }
    componentDidMount(){
        this.setState({
            height_charts:document.getElementById("home_Content").clientWidth,
            widthSpeed:Math.random()*100
        },()=>{
            this.headerEcharts("main","line");
            this.headerEcharts("main1","bar");
        })
    }

    // 头部图表数据函数
    headerEcharts(id,type){
        // 基于准备好的dom，初始化echarts实例
        const myChart = echarts.init(document.getElementById(id));
        // 生成随机数集
        const data=[];
        for(let i=0;i<parseInt(Math.random()*100)+10;i++){
            data.push(Math.random()*100);
        }
        const option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            grid:{
                top:"0px",
                left:"-20px",
                right:"-20px",
                bottom:"0px"
            },
            legend: {
              data: ['Line 1']
            },
            xAxis: [
              {
                type: 'category',
                show:false
              }
            ],
            yAxis: [
              {
                type: 'value',
                show:false,
              }
            ],
            series: [
              {
                type: type,
                stack: 'Total',
                smooth: true,
                lineStyle: {
                  width: 0
                },
                showSymbol: false,
                areaStyle: {
                  opacity: 1,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: 'rgba(128, 255, 165)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(1, 191, 236)'
                    }
                  ])
                },
                emphasis: {
                  focus: 'series'
                },
                data: data
              }
            ]
        };
        // 绘制图表
        myChart.setOption(option,true);
    }

    render(){
        return(
            <div className="home_header">
                <Card className="home_headerCard">
                    <div className="home_headerSale">
                        <div>销售额</div>
                        <Tooltip placement="top" title="销售额">
                            <InfoCircleOutlined style={{fontSize:"16px",color:"#999"}} />
                        </Tooltip>
                    </div>
                    <div className="home_Num">
                        <span>￥</span>
                        <CountUp start={0} end={parseInt(Math.random()*100000)} duration="1.5" separator="," />
                    </div>
                    <div className="home_Content">
                        <div className="home_ContentTop">
                            <div className="home_ContentTop1">周同比</div>
                            <div className="home_ContentTop2">
                                <span>{parseInt(Math.random()*100)}%</span>
                                <CaretUpOutlined style={{fontSize:"14px",color:"#48A819"}} />
                            </div>
                        </div>
                        <div className="home_ContentTop">
                            <div className="home_ContentTop1">周同比</div>
                            <div className="home_ContentTop2">
                                <span>{parseInt(Math.random()*100)}%</span>
                                <CaretDownOutlined style={{fontSize:'14px',color:"#D02029"}} />
                            </div>
                        </div>
                    </div>
                    <Divider />
                    <div className="home_headerFoot">日均销售额 ￥ {parseInt(Math.random()*100000)}</div>
                </Card>
                <Card className="home_headerCard">
                    <div className="home_headerSale">
                        <div>访问量</div>
                        <Tooltip placement="top" title="访问量">
                            <InfoCircleOutlined style={{fontSize:"16px",color:"#999"}} />
                        </Tooltip>
                    </div>
                    <div className="home_Num">
                        <span></span>
                        <CountUp start={0} end={parseInt(Math.random()*10000)} duration="1.5" separator="," />
                    </div>
                    <div className="home_Content" id="home_Content">
                        <div id="main" style={{width: this.state.height_charts,height:40}}></div>
                    </div>
                    <Divider />
                    <div className="home_headerFoot">日访问量 {parseInt(Math.random()*10000)}</div>
                </Card>
                <Card className="home_headerCard">
                    <div className="home_headerSale">
                        <div>支付笔数</div>
                        <Tooltip placement="top" title="支付笔数">
                            <InfoCircleOutlined style={{fontSize:"16px",color:"#999"}} />
                        </Tooltip>
                    </div>
                    <div className="home_Num">
                        <span></span>
                        <CountUp start={0} end={parseInt(Math.random()*10000)} duration="1.5" separator="," />
                    </div>
                    <div className="home_Content">
                        <div id="main1" style={{width: this.state.height_charts,height:40}}></div>
                    </div>
                    <Divider />
                    <div className="home_headerFoot">转化率 {parseInt(Math.random()*100)}%</div>
                </Card>
                <Card className="home_headerCard">
                    <div className="home_headerSale">
                        <div>线上购物转化率</div>
                        <Tooltip placement="top" title="线上购物转化率">
                            <InfoCircleOutlined style={{fontSize:"16px",color:"#999"}} />
                        </Tooltip>
                    </div>
                    <div className="home_Num">
                        <span></span>
                        <CountUp start={0} end={parseInt(Math.random()*100)} duration="1.5" separator="," />%
                    </div>
                    <div className="home_Content">
                        <div className="speed">
                            <div className="progress" style={{width:this.state.widthSpeed+"%"}}></div>
                        </div>
                    </div>
                    <Divider />
                    <div className="home_Content home_Content_bottom">
                        <div className="home_ContentTop">
                            <div className="home_ContentTop1">周同比</div>
                            <div className="home_ContentTop2">
                                <span>{parseInt(Math.random()*100)}%</span>
                                <CaretUpOutlined style={{fontSize:"14px",color:"#48A819"}} />
                            </div>
                        </div>
                        <div className="home_ContentTop">
                            <div className="home_ContentTop1">周同比</div>
                            <div className="home_ContentTop2">
                                <span>{parseInt(Math.random()*100)}%</span>
                                <CaretDownOutlined style={{fontSize:'14px',color:"#D02029"}} />
                            </div>
                        </div>
                    </div>
                </Card>
            </div>
        )
    }
}

//Conten Top部分
class Contentop extends Component{
    constructor(props){
        super();
        this.state={
            headerLeftStr:["今日","本周","本月","全年"],
            headerLeftNum:-1,
            keyValue:'',//点击其它地方用于清空日期的
            widthEcharts:0,//柱状图宽度
            widthEcharts_id:0,
            ranking:[],//排名数据
            tabNum:1,
        }
    }

    // 组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染
    componentDidMount=()=>{
        setTimeout(() => {
            this.contentEcharts("contentTop")
        }, 1);
    }
    // 日期选择回调
    onRangePicker=(date,dateString)=>{
        this.setState({
            headerLeftNum:-1
        })
        this.state.tabNum===1?this.contentEcharts("contentTop","销售额趋势"):this.contentEcharts("contentTop_id","访问量趋势")
        console.log(date,dateString,"日期选择回调")
    }
    // 今日本周等点击
    onLiClick=(index)=>{
        this.state.tabNum===1?this.contentEcharts("contentTop","销售额趋势"):this.contentEcharts("contentTop_id","访问量趋势")
        this.setState({
            headerLeftNum:index,
            keyValue:new Date()
        })
    }

    // 柱状图
    contentEcharts(id,val){
        const myChart = echarts.init(document.getElementById(id));
        const data=[];
        const data1=[];
        for(let i=0;i<12;i++){
            data.push(parseInt(Math.random()*300))
            data1.push({id:i+1,title:"黄埔区"+(i+1)+"门店",num:parseInt(Math.random()*458612)});
        }
        this.setState({
            ranking:data1
        })
        const option = {
            title: {
                text: val,
                textStyle:{
                    fontSize:14,
                    color:"#333"
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  label: {
                    backgroundColor: '#6a7985'
                  }
                }
            },
            grid: {
                top:"15%",
                left:"5%",
                right:"0%",
                bottom:"10%"
            },
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: data,
                    type: 'bar',
                    barWidth:25
                }
            ]
        };

        myChart.setOption(option,true);
    }
    tabClick=(key,evevt)=>{
        this.setState({
            tabNum:key
        },()=>{
            key===1?this.contentEcharts("contentTop","销售额趋势"):this.contentEcharts("contentTop_id","访问量趋势")
        })
        
    }

    render(){
        return(
            <div className="contentTop">
                <div className="contenttop_header">
                    <ul className="contenttop_headerLeft">
                        {this.state.headerLeftStr.map((item,index)=>(
                            <li key={index} onClick={()=>{this.onLiClick(index)}} className={this.state.headerLeftNum===index?'liClick':''}>{item}</li>
                        ))}
                    </ul>
                    <RangePicker  key = {this.state.keyValue} onChange={this.onRangePicker} size="Default" />
                </div>
                <Tabs defaultActiveKey="1" onTabClick={this.tabClick}>
                    <TabPane className="contentTopTas" tab="销售额" key="1">
                        <div className="contentTopTas1" id="contentTopTas1">
                            <div id="contentTop" style={{width:"100%",height:300}}></div>
                        </div>
                        <div className="contentTopTas2">
                            <div className="contentTopTas2_title">门店销售排名</div>
                            <ul className="contentTopTas2_ul">
                                {
                                    this.state.ranking.map((item,index)=>(
                                        index<8?(
                                            <li key={index}>
                                                <span className={index<3?'liOne':''}>{item.id}</span>
                                                <Tooltip className="contentTopTooltip" placement="top" title={item.title}>
                                                    {item.title}
                                                </Tooltip>
                                                <CountUp className="spanLast" start={0} end={item.num} duration="1.5" separator="," />
                                            </li>
                                        ):""
                                    ))
                                }
                            </ul>
                        </div>
                    </TabPane>
                    <TabPane className="contentTopTas" tab="访问量" key="2">
                        <div className="contentTopTas1">
                            <div id="contentTop_id" style={{width:"100%",height:300}}></div>
                        </div>
                        <div className="contentTopTas2">
                            <div className="contentTopTas2_title">门店销售排名</div>
                            <ul className="contentTopTas2_ul">
                                {
                                    this.state.ranking.map((item,index)=>(
                                        index<8?(
                                            <li key={index}>
                                                <span className={index<3?'liOne':''}>{item.id}</span>
                                                <Tooltip className="contentTopTooltip" placement="top" title={item.title}>
                                                    {item.title}
                                                </Tooltip>
                                                <CountUp className="spanLast" start={0} end={item.num} duration="1.5" separator="," />
                                            </li>
                                        ):""
                                    ))
                                }
                            </ul>
                        </div>
                    </TabPane>
                </Tabs>
            </div>
        )
    }
}

// 尾部
class Footer extends Component{
    constructor(){
        super();
        this.state={
            channel:["全部渠道","线上","门店"],
            channelNum:0,
            height_charts:0,
        }
    }

    componentDidMount(){
        this.headerEcharts("chartsFoot1","line");
        this.headerEcharts("chartsFoot2","line");
        this.pieChart();
    }

    // 尾部图表数据函数
    headerEcharts(id,type){
        // 基于准备好的dom，初始化echarts实例
        const myChart = echarts.init(document.getElementById(id));
        // 生成随机数集
        const data=[];
        for(let i=0;i<parseInt(Math.random()*100)+10;i++){
            data.push(Math.random()*100);
        }
        const option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            grid:{
                top:"0px",
                left:"-20px",
                right:"-20px",
                bottom:"0px"
            },
            legend: {
              data: ['Line 1']
            },
            xAxis: [
              {
                type: 'category',
                show:false
              }
            ],
            yAxis: [
              {
                type: 'value',
                show:false,
              }
            ],
            series: [
              {
                type: type,
                stack: 'Total',
                smooth: true,
                lineStyle: {
                  width: 1.5,
                  color:"#1669B7"
                },
                showSymbol: false,
                areaStyle: {
                  opacity: 1,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: 'rgba(128, 255, 165)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(1, 191, 236)'
                    }
                  ])
                },
                emphasis: {
                  focus: 'series'
                },
                data: data
              }
            ]
        };
        // 绘制图表
        myChart.setOption(option,true);
    }


    // 饼状图
    pieChart(){
        // 基于准备好的dom，初始化echarts实例
        const myChart = echarts.init(document.getElementById("sale"));
        // 生成随机数集
        const data=[];
        for(let i=0;i<4;i++){
            data.push({ value: Math.random()*100+100, name: 'rose '+i });
        }
        const option = {
            legend: {
                orient:"horizontal",
                top:"0",
                selectedMode: 'multiple', 
                padding:[0,20,0,0] //调节legend的位置
            },
            series: [
              {
                type: 'pie',
                radius: [40, 160],
                center: ['45%', '50%'],
                roseType: 'radius',
                itemStyle: {
                  borderRadius: 8
                },
                data: data
              }
            ]
        };
        // 绘制图表
        myChart.setOption(option,true);
    }
    

    // 渠道切换
    onchannel=(index)=>{
        this.setState({
            channelNum:index
        })
    }
    // 分页
    PaginationChange(page, pageSize){
        console.log(page, pageSize)
    }
    

    render(){
        // table数据
        
        const dataSource = [];
        for(let i=0;i<5;i++){
            dataSource.push({
                key: i,
                name: i+1,
                search: "https://source.unsplash.com/collection/"+i,
                address: parseInt(Math.random()*10000+10),
                increase:parseInt(Math.random()*100+10),
            })
        }
          
        const columns = [
            {
              title: '排名',
              dataIndex: 'name',
              key: 'name',
            },
            {
              title: '搜索关键图',
              dataIndex: 'search',
              key: 'search',
              render:tags => (
                  <div>
                      <Image 
                        className="imgTu" 
                        src={tags}
                        fallback=""
                      />
                  </div>
              )
            },
            {
              title: '用户数',
              dataIndex: 'address',
              key: 'address',
              // 表格排序
              sorter: (a, b) => a.address > b.address ? 1 : -1,
              render:tags =>(
                  <div>
                      <CountUp start={0} end={tags} duration="1.5" separator="," />
                  </div>
              )
            },
            {
                title:"周涨幅",
                dataIndex:"increase",
                key:"increase",
                sorter: (a, b) => a.increase > b.increase ? 1 : -1,
                render:tags =>(
                    <div className="baifenbi">
                        <span>{tags}%</span>
                        {tags>50?(<CaretUpOutlined style={{color:"#45A019"}} />) : (<CaretDownOutlined style={{color:"#F02731"}} />)}
                    </div>
                )
            }
        ];

        return(
            <div className="footer">
                <Card className="footercard">
                    <div className="footerHeader">
                        <div className="footerHeader_left">
                            线上热门搜索
                        </div>
                        <div className="footerHeader_right">
                            <SmallDashOutlined className="footerHeader_rightIcon" />
                        </div>
                    </div>
                    <Divider />
                    <div className="footer_cen">
                        <div className="footer_cen1">
                            <div className="footer_cenTop">搜索用户数<Tooltip title="搜索用户数"><InfoCircleOutlined className="footer_cenTopIcon" /></Tooltip></div>
                            <div className="footer_cencenter">
                                <div className="footer_cencenter1">{format.formatNum(""+parseInt(Math.random()*98456)+"")}</div>
                                <div className="footer_cencenter2">{(Math.random()*12).toFixed(1)}<CaretUpOutlined className="footer_cencenter2Icon" /></div>
                            </div>
                        </div>  
                        <div className="footer_cen1">
                            <div className="footer_cenTop">人均搜索次数<Tooltip title="人均搜索次数"><InfoCircleOutlined className="footer_cenTopIcon" /></Tooltip></div>
                            <div className="footer_cencenter">
                                <div className="footer_cencenter1">{format.formatNum(""+parseInt(Math.random()*98456)+"")}</div>
                                <div className="footer_cencenter2">{(Math.random()*12).toFixed(1)}<CaretUpOutlined className="footer_cencenter2Icon" /></div>
                            </div>
                        </div>
                    </div>
                    <div className="chartsFoot">
                        <div id="chartsFoot1" style={{height:40}}></div>
                        <div id="chartsFoot2" style={{height:40}}></div>
                    </div>
                    <Table
                        dataSource={dataSource}
                        columns={columns}
                    />
                </Card>
                <Card className="footercard" id="footercard">
                    <div className="footerHeader">
                        <div className="footerHeader_left">
                            销售额类别占比
                        </div>
                        <div className="footerHeader_right">
                            <ul className="footerHeader_rightul">
                                {
                                    this.state.channel.map((item,index)=>(
                                        <li className={this.state.channelNum===index?'channelLi':''} key={index} onClick={()=>{this.onchannel(index)}}>{item}</li>
                                    ))
                                }
                            </ul>
                            <SmallDashOutlined className="footerHeader_rightIcon" />
                        </div>
                    </div>
                    <Divider />
                    <div className="sale">
                        <p className="sale_title">销售额</p>
                        <div className="saleTop">
                            <div id="sale"></div>
                        </div>
                    </div>
                </Card>
            </div>
        )
    }
}

// 主体
class Home extends Component{
    constructor(){
        super();
        this.state={}
    }
    componentDidMount(){}
    render(){
        return(
            <div className="page-login">
                <Header></Header>
                <Contentop></Contentop>
                <Footer></Footer>
            </div>
        )
    }
}

export default Home
